@charset "utf-8";
@import "bootstrap";
@import "reset";
@import "iconfont";
@function r($px) {
    @return $px/40*1rem;
}
html, body {
    width: 100%;
    height: 100%;
}
.gimc-pingtai-Web {
    width: 100%;
    height: 100%;
    position: relative;
    font-family: "微软雅黑";
    //  左边划出内容
    .momen {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        background: black;
        left: -100%;
        z-index: 999;
    }
    .momen input[type="checkbox"]:checked~.sousuo {
        transform: translateX(100%);
        z-index: 999;
    }
    .momen>div {
        width: 100%;
        height: 100%;
        transition: all 1s;
        transform: translateX(-100%);
        background: green;
        position: absolute;
        top: 0;
        z-index: 5;
    }
    .momen input[type="checkbox"] {
        display: none;
        visibility: hidden;
        width: 0;
        height: 0;
    }
    //  内容
    .momen .sousuo {
        width: 100%;
        height: 100%;
        background: #222222;
        font-family: "微软雅黑";
        position: relative;
        padding-top: r(22);
        .toubu {
            width: r(613);
            height: r(55);
            margin: 0 auto;
            //  左边红色x
            .left-cha {
                width: r(45);
                height: r(45);
                float: left;
                display: inline-block;
                z-index: 2;
                background: white;
                border-radius: 50%;
                color: #e72a2f;
                text-align: center;
                line-height: r(45);
                .con {
                    font-size: r(54);
                    color: red;
                    z-index: 2;
                }
            }
            //  搜素框
            .souye {
                width: r(535);
                height: r(45);
                display: inline-block;
                float: right;
                color: white;
                input {
                    width: 100%;
                    height: 100%;
                    border-radius: 20px;
                    border: 1px solid white;
                    background: #222222;
                    background: url(../img/sou2.png) no-repeat left r(10) center /r(35);
                    color: white;
                    font-size: r(26);
                    padding-left: r(55);
                    padding-top: r(3);
                }
            }
        }
        //  .头像
        .touxiang {
            border-radius: 50%;
            overflow: hidden;
            width: r(132);
            height: r(132);
            margin: 0 auto;
            margin-top: r(30);
            position: relative;
            img {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 100%;
            }
        }
        //小敏
        .xiaomin {
            text-align: center;
            color: white;
            resize: none;
            width: r(240);
            height: r(140);
            margin: 0 auto;
            margin-top: r(15);
            .xiao {
                display: inline-block;
                font-size: r(26);
                vertical-align: middle;
                height: r(35);
            }
            .geren {
                width: r(130);
                height: r(24);
                margin-left: r(10);
                display: inline-block;
                border: 0.2px solid white;
                font-size: r(16);
                padding: 0 r(5);
                line-height: r(24);
                span {
                    color: darkgrey;
                }
            }
            .xingxing {
                margin: r(7) auto;
            }
            .guanzhu {
                font-size: r(24);
                color: white;
                span {
                    color: #b60005;
                }
            }
        }
        //  我的收藏.我的发布
        .myfaverri {
            width: r(480);
            height: r(58);
            margin: 0 auto;
            color: white;
            font-size: r(28);
            margin-top: r(15);
            .shoucang {
                width: r(224);
                height: r(58);
                float: left;
                text-align: center;
                line-height: r(58);
                background: #b60005;
                border-radius: 20px;
            }
            .fabu {
                text-align: center;
                line-height: r(58);
                float: right;
                width: r(224);
                height: r(58);
                background: #cdcdcd;
                border-radius: 20px;
            }
        }
        //  导航
        .daohanglan {
            padding-top: r(40);
            width: r(580);
            margin: 0 auto;
            .gimc,
            .wenzhang,
            .ziyuan,
            .kecheng {
                border-bottom: 2px solid #2d2d2d;
                color: #656565;
                width: 100%;
                height: r(95);
                line-height: r(95);
                font-size: r(24);
                p {
                    display: inline-block;
                }
                p:first-child {
                    float: left;
                }
                p:last-child {
                    float: right;
                }
            }
        }
        .tuichu {
            //          position: absolute;
            //          bottom: r(20);
            margin-top: r(25);
            width: 100%;
            .out {
                text-align: center;
                margin: 0 auto;
                color: white;
                font-size: r(26);
                line-height: r(53);
                width: r(180);
                height: r(53);
                background: #b60005;
                border-radius: 20px;
            }
        }
    }
    //  右边画出内容
    .right1 {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        right: -100%;
        z-index: 999;
    }
    .right1 input[type="checkbox"]:checked~.resou {
        transform: translateX(-100%);
    }
    .right1 .resou {
        width: 100%;
        height: 100%;
        transition: all 1s;
        transform: translateX(0);
        background: #f1f1f1;
        position: absolute;
        top: 0;
        z-index: 999999;
    }
    .right1 input[type="checkbox"] {
        display: none;
        visibility: hidden;
        width: 0;
        height: 0;
    }
    //  内容区域
    .resou {
        width: 100%;
        height: 100%;
        background: #f1f1f1;
        //      position: relative;
        font-family: "微软雅黑";
        .header {
            background: #1e1e1e;
            width: 100%;
            height: r(88);
            margin: 0 auto;
            //          text-align: center;
            //          padding-top: 4%;
            padding: r(20) r(15) 0;
            //          line-height: r(90);
            .search {
                width: r(530);
                height: r(54);
                float: left;
                display: inline-block;
                input {
                    width: 100%;
                    height: 100%;
                    padding-top: r(3);
                    border-radius: 20px;
                    border: 1px solid white;
                    background: #1e1e1e;
                    background: url(../img/sou2.png) no-repeat left r(10) center /r(35);
                    color: white;
                    padding-left: r(55);
                    font-size: r(30);
                }
            }
            .quxiao {
                float: right;
                height: r(54);
                display: inline-block;
                color: #f5eeee;
                line-height: r(54);
                font-size: r(26);
            }
        }
        //      热搜列表
        .liebiao {
            padding-left: 5%;
            padding-top: 5%;
            font-size: r(26);
            .biaoti {}
            .xiangmu {
                height: r(52);
                line-height: r(52);
                margin-top: r(15);
                div {
                    display: inline-block;
                    border: 1px solid gainsboro;
                    background: white;
                    color: #8b8b8b;
                    padding: 0 r(10);
                }
            }
            .meijie {
                height: r(52);
                margin-top: r(15);
                line-height: r(52);
                div {
                    display: inline-block;
                    border: 1px solid gainsboro;
                    background: white;
                    color: #8b8b8b;
                    padding: 0 r(15);
                }
            }
        }
    }
    header {
        width: 100%;
        height: r(90);
        background: #b20000;
        position: fixed;
        top: 0;
        z-index: 2;
        li {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
        li:first-child {
            left: 3%;
            .icon-caidan {
                font-size: r(38);
                color: white;
            }
        }
        li:nth-child(2) {
            width: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
            img {
                width: 100%;
            }
        }
        li:last-child {
            right: 3%;
            #circle {
                width: r(40);
                height: r(40);
                border-radius: 50%;
                border: 1.5px solid white;
                text-align: center;
                .icon-sousuo {
                    font-size: r(38);
                    color: white;
                    line-height: r(40);
                }
            }
        }
    }
    section {
        position: absolute;
        top: r(90);
        
        width: 100%;
        height: 83.9%;
        hr {
            border-color: #e2e2e2;
        }
        .pic {
            overflow: hidden;
            vertical-align: bottom;
            img {
                width: 100%;
            }
        }
        //      内容区域
        .all {
            padding-bottom: r(30);
            
            overflow: auto;
            .text {
                width: 100%;
                height: 100%;
                background: #f5f5f5;
                padding: 0 r(20);
                text-align: center;
                position: relative;
                p {
                    margin-top: r(115);
                    .iconfont {
                        font-size: r(60);
                        color: #b1b1b1;
                    }
                }
                img {
                    width: 100%;
                }
                .huise {
                    width: 100%;
                    height: 100%;
                    //                  height: r(920);
                    background: rgba(147, 147, 147, 0.8);
                    position: absolute;
                    top: 0;
                    left: 0;
                    padding-top: r(120);
                    //                      visibility: hidden;
                    .baise {
                        width: r(500);
                        height: r(420);
                        background: white;
                        margin: 0 auto;
                        p {
                            font-size: r(22);
                            color: #aa975c;
                            margin-top: r(80);
                            display: inline-block;
                        }
                        >div {
                            display: inline-block;
                            border-radius: 50%;
                            width: r(98);
                            height: r(98);
                            background: #aa975c;
                            color: white;
                            font-size: r(22);
                            text-align: center;
                            padding-top: r(18);
                            margin-top: r(70);
                        }
                        .ziyuan {
                            margin-right: r(30);
                        }
                        .rencai {
                            margin-left: r(30);
                        }
                    }
                }
            }
        }
    }
    footer {
        //      width: r(640);
        height: r(94);
        background: #f5f5f5;
        width: 100%;
        position: fixed;
        bottom: 0;
        border-top: 1px solid #b1aeaf;
        ul {
            height: 100%;
            font-size: 0;
            >li {
                padding-bottom: 1%;
                font-size: r(20);
                width: 20%;
                height: r(94);
                display: inline-block;
                text-align: center;
                border-right: 1px solid #e8e8e8;
                .pic {
                    height: 55%;
                    width: 80%;
                    img {
                        height: 100%;
                    }
                    margin:8% auto 4%;
                }
                .red {
                    color: #B20000;
                }
            }
        }
    }
}